<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的订单</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body {
      background-color: #f5f5f5;
      color: #333;
      font-family: Arial, sans-serif;
    }

    .order-container {
      max-width: 1000px;
      margin: 20px auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .order-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .order-list {
      margin-top: 20px;
    }

    .order-item {
      border-bottom: 1px solid #ddd;
      padding: 10px 0;
    }

    .order-item:last-child {
      border-bottom: none;
    }

    .order-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .order-status {
      text-align: right;
    }
  </style>
</head>

<body>
  <div id="app" class="order-container">
    <h2 class="order-header">我的订单</h2>
    <div class="order-list">
      <div v-for="order in orders" :key="order.id" class="order-item">
        <div class="order-details">
          <div>
            <p>订单号: {{ order.payOrderNo }}</p>
            <p>下单时间: {{ order.createTime }}</p>
            <p>总金额: ¥{{ order.totalAmount }}</p>
          </div>
          <div class="order-status">
            <p>状态: {{ orderStatus(order.status) }}</p>
            <el-button type="primary" @click="viewOrder(order.orderId)">查看详情</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-pagination background layout="prev, pager, next ,sizes" :total="total" :page-size="params.pageSize" :current-page="params.pageNo"
      @current-change="handlePageChange" :page-sizes="[100, 200, 300, 400]" @size-change="handleSizeChange">
    </el-pagination>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          orders: [
            { id: '100001', date: '2023-10-01', totalPrice: 299.99, status: '已完成' },
            { id: '100002', date: '2023-10-05', totalPrice: 159.99, status: '待发货' },
            { id: '100003', date: '2023-10-10', totalPrice: 499.99, status: '已取消' },
            // 更多订单数据...
          ],
          params: {
            pageNo: 1,
            pageSize: 10,
            userId: ''
          },
          total: 0
        }
      },
      computed: {
        paginatedOrders() {
          const start = (this.currentPage - 1) * this.pageSize;
          const end = this.currentPage * this.pageSize;
          return this.orders.slice(start, end);
        },

      },
      created() {
        this.init()
      },
      methods: {
        orderStatus(status) {
          const statusMap = {
            1: '待支付',
            2: '已支付',
            3: '已关闭',
            4: '已完成',
            5: '已报名',
            6: '已申请退款',
            7: '已退款'
          };
          return statusMap[status] || '未知状态';
        },
        async init() {
          const  userRes = await axios.get("com/get")
          this.params.userId = userRes.data.data.id
          const res = await axios.get("/order/page",{
            params: {
              ...this.params
            }
          })
          this.orders = res.data.records
          this.total = res.total
        },
        handlePageChange() {
          this.init()
        },
        handleSizeChange() {
          this.init()
        },
        viewOrder(orderId) {
          window.location.href = `order-detail.html?orderId=${orderId}`;
        },
        handlePageChange(page) {
          this.currentPage = page;
        }
      }
    });
  </script>
</body>

</html>